<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    导入vue的js文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--    window.onload-->
    <title>Vue使用</title>
</head>
<body>

<!--使用vue的方法-->
<!--id 执行对象名称-->
<div id ='app'>
<!--    使用vue语法-->
    <h1>{{name}}</h1>
<!--    调用组件封装的代码，把定义的组件名称作为标签使用-->
    <zujian></zujian>
</div>
<script>
    // 局部组件定义：通过变量指定局部组件名称,json数据
    var zujian_a={
        template: "<div>局部组件A{{name}} <h1>{{pos}}</h1></div>",
        data:function () {
            return {name :'局部组件数据:itcast_A'}
        },
        props: ['pos']
    };
    // 全局组件 代码的封装
    Vue.component(
        //组件名称
        'zujian',
        {
            //指定封装的代码
            //在全局组件中调用局部组件
            template:"<div>全局组件<zujian_a v-bind:pos='age'>" +
                "</zujian_a>{{name}}</div>",
            // 将局部组件注册到全局组件中
            components:{
                zujian_a
            },
            // 指定组件（全局组件）绑定的数据
            data:function () {
                // 通过return返回数据
                return {name:'itcast',age:100}
            }
        }
    );
    new Vue({
        // 指定名称
        el:'#app',
        // 指定数据
        data:{
            name:'Python'
        }
    })
</script>
</body>
</html>